import {
  onFormInit,
  onFormValuesChange,
  onFieldReact,
  onFieldMount,
  onFieldReset,
  onFieldChange,
} from '@formily/core';
import {
  observer,
  useField,
  useFieldSchema,
  useFormEffects,
} from '@formily/react';
import { InputNumber } from 'antd';
import React, { FC, useEffect, useRef, useState } from 'react';

import styles from './style.less';

const NumberRange: FC = observer(() => {
  const schema = useFieldSchema();
  const field = useField<any>();
  // const [fieldValue, setFieldValue] = useState<any>({});
  const [schemaItemInfo, setSchemaItemInfo] = useState<any>({});
  const [data, setData] = useState<any>({ min: 0, max: 0 });
  useFormEffects(() => {
    onFieldChange(field.path.entire, (f: any) => {
      if (f.value) {
        setData({
          max: f.value[1],
          min: f.value[0],
        });
      }
    });
  });

  useEffect(() => {
    if (schema) {
      setSchemaItemInfo(schema);
    }
  }, []);
  // if (max > maxNum) field.setSelfErrors(`最大值不得超过${maxNum}`);
  // else if (min < minNum) field.setSelfErrors(`最小值不得小于${minNum}`);
  // else if (min > max) field.setSelfErrors('最小值必须小于最大值');
  // else {
  // }

  const onChange = (val: any, type: string) => {
    const d = { ...data };
    d[type] = val;
    field.setValue([d.min, d.max]);
  };
  return (
    <div className={styles.NumberRange}>
      <InputNumber
        onChange={(val) => onChange(val, 'min')}
        value={data.min}
        addonAfter={schemaItemInfo['x-component-props']?.addonAfter || ''}
      />
      <p>-</p>
      <InputNumber
        onChange={(val) => onChange(val, 'max')}
        value={data.max}
        addonAfter={schemaItemInfo['x-component-props']?.addonAfter || ''}
      />
    </div>
  );
});
export default NumberRange;
